<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
video {
	border: 1px solid #ccc;
	display: block;
	margin: 0 0 20px 0;
	float:left;
}
#canvas {
	margin-top: 20px;
	border: 1px solid #ccc;
	display: block;
}
</style>
</head>
<body>
	<div id="webcam" >111111111111</div>
	<script src="http://libs.baidu.com/jquery/1.6.4/jquery.min.js"></script>
	<script type="text/javascript" src="js/jquery.webcam.min.js"></script>
	<script type="text/javascript">
	jQuery("#webcam").webcam({
		width: 320,
		height: 240,
		mode: "callback",
		swffile: "js/jscam_canvas_only.swf", // canvas only doesn't implement a jpeg encoder, so the file is much smaller

		onTick: function(remain) {

			if (0 == remain) {
				jQuery("#status").text("Cheese!");
			} else {
				jQuery("#status").text(remain + " seconds remaining...");
			}
		},

		onSave: function(data) {

			var col = data.split(";");
	    // Work with the picture. Picture-data is encoded as an array of arrays... Not really nice, though =/
		},

		onCapture: function () {
			webcam.save();

	 	  // Show a flash for example
		},

		debug: function (type, string) {
			// Write debug information to console.log() or a div, ...
		},

		onLoad: function () {
	    // Page load
			var cams = webcam.getCameraList();
			for(var i in cams) {
				jQuery("#cams").append("<li>" + cams[i] + "</li>");
			}
		}
	});
	 function savePhoto(){
	        webcam.capture();
	    }
	</script>
    <input type="button" value="拍照" id="saveBtn" onclick="savePhoto();"/>
</body>
</html>